/**
 * @descripion:
 * @param {Viewer} viewer
 * @param {Cartesian2} position
 * @param {String} title
 * @param {String} id
 * @return {*}
 */
import Vue from "vue";
import Label from "@/components/Label/label";
let WindowVm = Vue.extend(Label);
export default class DivLabel {
    constructor(val) {
        this.viewer = val.viewer;
        this.height = val.height;
        this.position = Cesium.Cartesian3.fromDegrees(
            val.position[0],
            val.position[1],
            val.height
        );
        this.parent = val.parent
        this.div = document.createElement("div");
        this.addLabel(val);
    }
    addLabel(val) {
        this.div.id = val.id;
        this.div.style.position = "absolute";
        this.div.style.width = "200px"
        this.div.style.height = "50px"
        this.div.style.backgroundColor = "#FFFFFF";
        this.div.style.color = "#000000";
        this.div.style.padding = "10px"
        this.div.style.fontSize = "16px";
        this.div.style.border = "2px solid #60cdad"
        this.div.style.display = "none"
        let divHTML = `<div>${val.title}</div>`
        this.div.innerHTML = divHTML;
        this.viewer.cesiumWidget.container.appendChild(this.div);
        this.addPostRender()
    }
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }
    postRender() {
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            this.viewer.scene,
            this.position,
            windowPosition
        );
        this.div.style.bottom = canvasHeight - windowPosition.y + "px";
        const elWidth = this.div.offsetWidth;
        this.div.style.left = windowPosition.x - elWidth / 2 + "px";

        const camerPosition = this.viewer.camera.position;
        let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
        height += this.viewer.scene.globe.ellipsoid.maximumRadius;
        if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000) {
            this.div.style.display = "block"
        } else {
            this.div.style.display = "none"
        }
    }
}